<template>
    <div>
        <div class="table-header-wrap">
            <filter-form @search="handleSearch" />
        </div>
        <a-table rowKey="url" size="small" :loading="loading" :columns="tableColumns" :data-source="list" :pagination="false">
            <template #action="{ record }">
                <a @click="previewFile(record, record.tmpFile)">预览</a>
                <a-divider type="vertical" />
                <a @click="downFile(record, record.tmpFile)">下载</a>
            </template>
        </a-table>
        <flexbox justify="center" style="margin-top: 24px">
            <a-button type="primary" :loading="loading" @click="handleLoadMore" v-if="isMore">加载更多</a-button>
        </flexbox>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import FilterForm from './components/filterForm.vue';
import { useDownFile } from '@/hooks/common/useFile';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    name: 'RelativeAsset',
    components: {
        FilterForm
    },
    props: {
        detail: { type: Object, default: () => ({}) }
    },
    setup(props) {
        const { downFile, previewFile } = useDownFile();
        const tableNo = 'productAnalysisAsset';
        // 表格表头栏
        const tableColumns = [
            {
                title: '文件名称',
                dataIndex: 'fileName'
            },
            {
                title: '产出阶段',
                dataIndex: 'connectType'
            },
            {
                title: '版本号',
                dataIndex: 'versionNumber'
            },
            {
                title: '更新时间',
                dataIndex: 'createTime'
            },
            {
                title: '操作',
                dataIndex: '',
                key: 'action',
                slots: { customRender: 'action' }
            }
        ];
        const state = reactive<any>({
            loading: false,
            list: [],
            query: {
                limit: 5
            },
            isMore: false
        });
        // 搜索回调
        const handleSearch = (query) => {
            state.query = {
                ...state.query,
                ...query
            };
            getList();
        };
        const getList = async () => {
            state.loading = true;
            const { success, moule } = await api.versionModel.selectFiles(state.query);
            state.loading = false;
            if (success) {
                state.list = [...moule];
                state.isMore = state.list.length === state.query.limit;
            }
        };
        const handleLoadMore = () => {
            state.query.limit += 5;
            getList();
        };
        const init = () => {
            state.query = {
                ...state.query,
                system: props.detail.id
            };
            getList();
        };
        init();
        return {
            tableNo,
            tableColumns,
            ...toRefs(state),
            handleLoadMore,
            downFile,
            previewFile,
            handleSearch
        };
    }
});
</script>
<style scoped lang="less">
.table-header-wrap {
    margin: 16px 0;
}
.table-title {
    font-size: 16px;
    font-weight: bold;
}
</style>
